<template>
  <div id="wrap">
    <h1>axios实例封装api使用</h1>
    <!-- 组件内使用 -->
    <button class="btn-id" @click="postRolesHandler">角色新增功能</button>
    <button class="btn-id" @click="puttRolesHandler">角色修改功能</button>
    <button class="btn-id" @click="patchRolesHandler">角色禁用功能</button>
    <button class="btn-id" @click="deleteRolesHandler">角色删除功能</button>

    <div v-if="roles && roles.length > 0">
      <div v-for="item in roles" :key="item.id" class="box">
        <span>角色ID：{{ item.id }}</span>
        <span>角色名称:{{ item.name }}</span>
        <span>角色编码：{{ item.code }}</span>
        <span>排序：{{ item.sort }}</span>
        <span>角色状态：{{ item.status }}-正常</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'dayStuDemo67',
};
</script>

<script lang="ts" setup>
//导入axios封装的实例方法
import { ref, onMounted } from 'vue';
import api from '@/api/index';
import { type Role } from '@/api/index';

//请求数据赋值容器
const roles = ref<Role[]>([]);

//get请求获取数据 角色分页列表
const getRolePageHandler = async () => {
  api.getFinish().then((res) => {
    console.log(res.data);
    roles.value = res.data.data.list;
  });
};
//post添加数据  角色的增加功能
const postRolesHandler = async () => {
  const newRole = {
    name: '施雅典11',
    code: '施雅典11',
    sort: 1,
    status: 1,
  };
  api.putRoles(newRole).then((res) => {
    console.log(res.data);
  });
  getRolePageHandler();
};

//put修改数据  角色的修改功能
const puttRolesHandler = () => {
  const raw = {
    name: '天煞那个1',
    code: '受窘价格1',
    sort: 1,
    status: 1,
  };
  api.putRoles(raw).then((res) => {
    console.log(res.data);
    getRolePageHandler();
  });
};

//patch修改角色状态  角色的状态是否禁用
const patchRolesHandler = () => {
  api.patchRoles().then((res) => {
    console.log(res.data);
    getRolePageHandler();
  });
};

//!delete删除角色
const deleteRolesHandler = () => {
  api.deleteRoles().then((res) => {
    console.log(res.data);
    getRolePageHandler();
  })
};

//生命周期挂在刷新
onMounted(() => {
  getRolePageHandler();
});
</script>
<style lang="scss" scoped>
.btn-id {
  padding: 5px;
  font-weight: bold;

  font-size: 14px;
}
.box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  span {
    margin: 10px;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 10px;
    border: 2px solid #409eff;
    background-color: #40e2ff;
  }
}
</style>
